import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import './Csstransition.css'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isShow: true
    }
  }
  toggle(){
    this.setState({
      isShow:!this.state.isShow
    })
  }
  render() {
    const { isShow } = this.state
    return (
      <div>
        <h1>Csstransition动画</h1>
        <button onClick={() => this.toggle()}>显示/隐藏</button>
        <CSSTransition 
          in={isShow} 
          classNames="fade" 
          timeout={1000} 
          unmountOnExit={true}>
          <span>哈哈哈</span>
        </CSSTransition>
        {/* 
          要执行动画的元素必须包裹到CSSTransition中 这个动画是用于切换显示和隐藏的
          in=控制动画切换的值 
          classNames="fade"  自定义动画类名
          timeout=动画执行的时间
          unmountOnExit=动画执行完是否要移除元素
          CSSTransition执行动画的原理：
            1. CSSTransition组件会根据in的值来决定执行动画
            2. 当in的值为true时，CSSTransition组件会自动添加两个类名
              1. fade-enter  进入动画开始
              2. fade-enter-active  进入动画执行
            3. 当in的值为false时，CSSTransition组件会自动添加两个类名
              1. fade-exit  退出动画开始
              2. fade-exit-active  退出动画执行
            4. 当动画执行完之后，CSSTransition组件会自动移除这两个类名
            5. 我们只需要在CSS中定义这两个类名即可实现动画效果
            6. 如果需要自定义动画，只需要修改classNames的值即可
            7. 如果需要自定义动画时间，只需要修改timeout的值即可

        */}
      </div>
    )
  }
}

export default App